<template>
  <div class="container" :class="{ noscroll: isPop }">
    <section class="salary_list">

    </section>
    <Empty :message="mes" v-if="false"></Empty>
    <picker mode="date" @change="bindDateChange" fields="month" :value="choosevalue">
      <view class="picker choose">
        {{choosevalue}}
      </view>
    </picker>

    <div class="panel">
      <div class="header">姓名：{{userName}}</div>
      <div class="header">工资：{{allmoney}}元</div>
    </div>

    <div class="panel" v-if="basemoney != '' ">
      <div class="header"><span class="shu"></span>基本工资&nbsp;{{totalbasemoney}}<small>元</small></div>
      <ul class="panel_ul">
        <li class="flex">
          <span class="left flex-item">职称底薪</span>
          <span class="right">{{basemoney.type1}}元 <i class="grey_arrow"></i></span>
        </li>
        <li class="flex">
          <span class="left flex-item">责任底薪</span>
          <span class="right">{{basemoney.type2}}元 <i class="grey_arrow"></i></span>
        </li>
      </ul>
    </div>

    <div class="panel" v-if="salemoney != ''">
      <div class="header"><span class="shu"></span>总提成&nbsp;{{totalsalemoney}}<small>元</small></div>
      <ul class="panel_ul">
        <li class="flex" @tap="openMoneyinfoSale(2,1,'销售提成')">
          <span class="left flex-item">销售提成</span>
          <span class="right">{{salemoney.type1}}元 <i class="grey_arrow"></i></span>
        </li>
        <li class="flex" @tap="openMoneyinfoSale(2,3,'卡耗提成')">
          <span class="left flex-item">卡耗提成</span>
          <span class="right">{{salemoney.type3}}元 <i class="grey_arrow"></i></span>
        </li>
        <li class="flex" @tap="openMoneyinfoSale(2,2,'手工提成')">
          <span class="left flex-item">手工提成</span>
          <span class="right">{{salemoney.type2}}元 <i class="grey_arrow"></i></span>
        </li>
        <li class="flex" @tap="openMoneyinfoBase(2,4,'其他提成')">
          <span class="left flex-item">其他提成</span>
          <span class="right">{{salemoney.type4}}元 <i class="grey_arrow"></i></span>
        </li>
        <li class="flex" @tap="openMoneyinfoSale(2,5,'现金阶梯')">
          <span class="left flex-item">现金阶梯</span>
          <span class="right">{{salemoney.type5}}元 <i class="grey_arrow"></i></span>
        </li>
        <li class="flex" @tap="openMoneyinfoSale(2,6,'卡耗阶梯')">
          <span class="left flex-item">卡耗阶梯</span>
          <span class="right">{{salemoney.type6}}元 <i class="grey_arrow"></i></span>
        </li>
      </ul>
    </div>

    <div class="panel">
      <div class="header"><span class="shu"></span>总指标&nbsp;{{(totalzhibiaomoney)}}<small>元</small></div>
      <ul class="panel_ul">
        <li class="flex" @tap="openMoneyinfoBase(3,1,'销售指标')">
          <span class="left flex-item">销售指标</span>
          <span class="right">{{zhibiaomoney.type1}}元 <i class="grey_arrow"></i></span>
        </li>
        <li class="flex" @tap="openMoneyinfoBase(3,2,'卡耗指标')">
          <span class="left flex-item">卡耗指标</span>
          <span class="right">{{zhibiaomoney.type2}}元 <i class="grey_arrow"></i></span>
        </li>
        <li class="flex" @tap="openMoneyinfoBase(3,3,'手工指标')">
          <span class="left flex-item">手工指标</span>
          <span class="right">{{zhibiaomoney.type3}}元 <i class="grey_arrow"></i></span>
        </li>
        <li class="flex" @tap="openMoneyinfoBase(3,4,'客数指标')">
          <span class="left flex-item">客数指标</span>
          <span class="right">{{zhibiaomoney.type4}}元 <i class="grey_arrow"></i></span>
        </li>
        <li class="flex" @tap="openMoneyinfoBase(3,5,'客次指标')">
          <span class="left flex-item">客次指标</span>
          <span class="right">{{zhibiaomoney.type5}}元 <i class="grey_arrow"></i></span>
        </li>
        <li class="flex" @tap="openMoneyinfoBase(3,6,'其他指标')">
          <span class="left flex-item">其他</span>
          <span class="right">{{zhibiaomoney.type6}}元 <i class="grey_arrow"></i></span>
        </li>
      </ul>
    </div>

    <div class="panel">
      <div class="header"><span class="shu"></span>总奖金&nbsp;{{totaljiangjinmoney}}<small>元</small></div>
      <ul class="panel_ul">
        <li class="flex" @tap="openMoneyinfoBase(4,1,'全勤奖金')">
          <span class="left flex-item">全勤奖金</span>
          <span class="right">{{jiangjinmoney.type1}}元 <i class="grey_arrow"></i></span>
        </li>
        <li class="flex" @tap="openMoneyinfoBase(4,2,'利润奖金')">
          <span class="left flex-item">利润奖金</span>
          <span class="right">{{jiangjinmoney.type2}}元 <i class="grey_arrow"></i></span>
        </li>
        <li class="flex" @tap="openMoneyinfoBase(4,3,'其他奖金')">
          <span class="left flex-item">其他</span>
          <span class="right">{{jiangjinmoney.type3}}元 <i class="grey_arrow"></i></span>
        </li>
      </ul>
    </div>

    <div class="panel">
      <div class="header"><span class="shu"></span>总福利&nbsp;{{totalful}}<small>元</small></div>
      <ul class="panel_ul">
        <li class="flex" @tap="openMoneyinfoBase(5,1,'工龄补贴')">
          <span class="left flex-item">工龄补贴</span>
          <span class="right">{{fulimoney.type1}}元 <i class="grey_arrow"></i></span>
        </li>
        <li class="flex" @tap="openMoneyinfoBase(5,2,'社保补贴')">
          <span class="left flex-item">社保补贴</span>
          <span class="right">{{fulimoney.type2}}元 <i class="grey_arrow"></i></span>
        </li>
        <li class="flex" @tap="openMoneyinfoBase(5,2,'其他补贴')">
          <span class="left flex-item">其他</span>
          <span class="right">{{fulimoney.type3}}元 <i class="grey_arrow"></i></span>
        </li>
      </ul>
    </div>

    <div class="panel">
      <div class="header"><span class="shu"></span>总扣除&nbsp;{{totalkouchumoney}}<small>元</small></div>
      <ul class="panel_ul">
        <li class="flex" @tap="openMoneyinfoBase(6,1,'缺勤扣除')">
          <span class="left flex-item">缺勤扣除</span>
          <span class="right">{{kouchumoney.type1}}元 <i class="grey_arrow"></i></span>
        </li>
        <li class="flex" @tap="openMoneyinfoBase(6,2,'请假扣除')">
          <span class="left flex-item">请假扣除</span>
          <span class="right">{{kouchumoney.type2}}元 <i class="grey_arrow"></i></span>
        </li>
        <li class="flex" @tap="openMoneyinfoBase(6,3,'其他扣除')">
          <span class="left flex-item">其他</span>
          <span class="right">{{kouchumoney.type3}}元 <i class="grey_arrow"></i></span>
        </li>
        <li class="total">
          本月工资总计：{{allmoney}}元
        </li>
      </ul>
    </div>
    <!-- 工资弹窗 -->
    <!-- 订单信息 -->
    <div class="mask" v-if="salarypop" @tap="closepop"></div>
    <div class="salary_pop" v-if="salarypop">
      <div class="title">{{salaPopName}}</div>
      <scroll-view :scroll-y="true" style="height:391px;">
        <ul class="pop_ul">
          <li class="flex" v-for="item in saleList" :key="item.orderid" v-if="saleList.length > 0">
            <span class="pop_pic">
              <img v-if="item.headurl == 0 || !item.headurl" src="/static/imgs/system_user.png">
              <img v-else :src="item.headurl">
            </span>
            <div class="details flex-item">
              <div class="pop_name">{{item.name}}</div>
              <div class="times">支付时间：{{item.paytime}}</div>
              <div class="times">到店时间：{{item.ordertime}}</div>
            </div>
            <div class="remarks">{{item.remarks}}</div>
            <div class="money" v-if="item.money > 0">+{{item.money}}元</div>
            <div class="money" v-else>-{{item.money}}元</div>
          </li>
          <li v-if="saleList.length === 0" class="nomsg">
            <Empty message="没有销售提成的信息！"></Empty>
          </li>
        </ul>
      </scroll-view>
    </div>
    <!-- 手工录入信息 -->
    <div class="mask" v-if="salarysystem_pop" @tap="closepop"></div>
    <div class="salary_pop" v-if="salarysystem_pop">
      <div class="title">{{salaPopName}}</div>
      <scroll-view :scroll-y="true" style="height:391px;">
        <ul class="pop_ul">
          <li class="flex" v-for="item in saleList" :key="item.orderid" v-if="saleList.length > 0">
            <span class="pop_pic">
              <img src="/static/imgs/system_user.png">
            </span>
            <div class="details flex-item">
              <div class="pop_name">{{salaPopName}}</div>
              <div class="times">{{item.remarks}}</div>
            </div>
            <div class="money" v-if="item.money > 0">+{{item.money}}元</div>
            <div class="money" v-else>-{{item.money}}元</div>
          </li>
          <li v-if="saleList.length === 0" class="nomsg">
            <Empty message="没有销售提成的信息！"></Empty>
          </li>
        </ul>
      </scroll-view>
    </div>
  </div>
</template>

<script>
import Empty from '@/components/empty'
import moment from 'moment'
import api from '@/utils/api'
import wx from 'wx'
import Toast from '@/utils/toast'
export default {
  data () {
    return {
      menutitle: '',
      menushow: true,
      mes: '没有销售提成的消息哦！',
      choosevalue: '',
      year: moment().year(),
      month: moment().month() + 1,
      salemoney: '',
      totalsalemoney: 0,
      basemoney: '',
      totalbasemoney: 0,
      zhibiaomoney: '',
      totalzhibiaomoney: 0,
      jiangjinmoney: '',
      totaljiangjinmoney: 0,
      fulimoney: '',
      totalfulimoney: 0,
      totalful: 1,
      kouchumoney: '',
      totalkouchumoney: 0,
      allmoney: 0,
      userId: 0,
      userName: '',
      isPop: false,
      salarypop: false,
      salarysystem_pop: false,
      saleList: [],
      baseList: [],
      salaPopName: '',
      isparam: '',
      workername: ''
    }
  },

  components: {
    Empty
  },
  onLoad (option) {
    console.log(option)
    if (option) {
      this.isparam = option.isparam
      this.workername = option.workername
    }
  },
  async onShow () {
    this.choosevalue = `${this.year}-${this.month}`
    if (this.isparam === '1') {
      this.userId = wx.getStorageSync('params_userid')
      this.userName = this.workername
    } else {
      this.userId = wx.getStorageSync('userInfo').user_id
      this.userName = wx.getStorageSync('userInfo').user_name
    }
    await Promise.all([
      this.getinfo()
    ])
  },
  methods: {
    async getinfo () {
      let timeStart = this.year + '-' + this.month + '-1';
      let startTimejs = moment(timeStart, 'YYYY-MM-DD').unix();
      let timeEnd = ''
      if (this.month === 12) {
        timeEnd = this.year + '-' + Number(this.month) + '-31';
      } else {
        timeEnd = this.year + '-' + Number(this.month + 1) + '-1';
      }
      let endTimejs = moment(timeEnd, 'YYYY-MM-DD').unix();
      const ret = await api.getusermoneylist({ start_time_js: startTimejs, end_time_js: endTimejs, user_id: this.userId });
      if (ret) {
        // console.log(JSON.stringify(ret));
        if (ret.code === '100') {
          // 提成计算
          let allmoney = 0;
          let salemoney = {
            type1: 0,
            type2: 0,
            type3: 0,
            type4: 0,
            type5: 0,
            type6: 0
          }
          for (let i = 0; i < ret.sale.length; i++) {
            if (ret.sale[i].type === 1) {
              salemoney.type1 = parseFloat(ret.sale[i].money).toFixed(2);
              allmoney += ret.sale[i].money
            }
            if (ret.sale[i].type === 2) {
              salemoney.type2 = parseFloat(ret.sale[i].money).toFixed(2);
              allmoney += ret.sale[i].money
            }
            if (ret.sale[i].type === 3) {
              salemoney.type3 = parseFloat(ret.sale[i].money).toFixed(2);
              allmoney += ret.sale[i].money
            }
            if (ret.sale[i].type === 4) {
              salemoney.type4 = parseFloat(ret.sale[i].money).toFixed(2);
              allmoney += ret.sale[i].money
            }
            if (ret.sale[i].type === 5) {
              salemoney.type5 = parseFloat(ret.sale[i].money).toFixed(2);
              allmoney += ret.sale[i].money
            }
            if (ret.sale[i].type === 6) {
              salemoney.type6 = parseFloat(ret.sale[i].money).toFixed(2);
              allmoney += ret.sale[i].money
            }
          }
          this.salemoney = salemoney;
          this.totalsalemoney = parseFloat((Number(salemoney.type1) + Number(salemoney.type2) + Number(salemoney.type3) + Number(salemoney.type4) + Number(salemoney.type5) + Number(salemoney.type6))).toFixed(2);
          // 基本工资计算
          let basemoney = {
            type1: 0,
            type2: 0
          }
          for (let i = 0; i < ret.base.length; i++) {
            if (ret.base[i].type === 1) {
              basemoney.type1 = parseFloat(ret.base[i].money).toFixed(2);
              allmoney += ret.base[i].money
            }
            if (ret.base[i].type === 2) {
              basemoney.type2 = parseFloat(ret.base[i].money).toFixed(2);
              allmoney += ret.base[i].money
            }
          }
          this.basemoney = basemoney;
          this.totalbasemoney = parseFloat((Number(basemoney.type1) + Number(basemoney.type2))).toFixed(2)
          // 指标工资计算
          let zhibiaomoney = {
            type1: 0,
            type2: 0,
            type3: 0,
            type4: 0,
            type5: 0,
            type6: 0
          }
          for (let i = 0; i < ret.zhibiao.length; i++) {
            if (ret.zhibiao[i].type === 1) {
              zhibiaomoney.type1 = parseFloat(ret.zhibiao[i].money).toFixed(2);
              allmoney += ret.zhibiao[i].money
            }
            if (ret.zhibiao[i].type === 2) {
              zhibiaomoney.type2 = parseFloat(ret.zhibiao[i].money).toFixed(2);
              allmoney += ret.zhibiao[i].money
            }
            if (ret.zhibiao[i].type === 3) {
              zhibiaomoney.type3 = parseFloat(ret.zhibiao[i].money).toFixed(2);
              allmoney += ret.zhibiao[i].money
            }
            if (ret.zhibiao[i].type === 4) {
              zhibiaomoney.type4 = parseFloat(ret.zhibiao[i].money).toFixed(2);
              allmoney += ret.zhibiao[i].money
            }
            if (ret.zhibiao[i].type === 5) {
              zhibiaomoney.type5 = parseFloat(ret.zhibiao[i].money).toFixed(2);
              allmoney += ret.zhibiao[i].money
            }
            if (ret.zhibiao[i].type === 6) {
              zhibiaomoney.type6 = parseFloat(ret.zhibiao[i].money).toFixed(2);
              allmoney += ret.zhibiao[i].money
            }
          }
          this.zhibiaomoney = zhibiaomoney;
          this.totalzhibiaomoney = parseFloat((Number(zhibiaomoney.type1) + Number(zhibiaomoney.type2) + Number(zhibiaomoney.type3) + Number(zhibiaomoney.type4) + Number(zhibiaomoney.type5) + Number(zhibiaomoney.type6))).toFixed(2)
          // 奖金计算
          let jiangjinmoney = {
            type1: 0,
            type2: 0,
            type3: 0
          }
          for (let i = 0; i < ret.jiangjin.length; i++) {
            if (ret.jiangjin[i].type === 1) {
              jiangjinmoney.type1 = parseFloat(ret.jiangjin[i].money).toFixed(2);
              allmoney += ret.jiangjin[i].money
            }
            if (ret.jiangjin[i].type === 2) {
              jiangjinmoney.type2 = parseFloat(ret.jiangjin[i].money).toFixed(2);
              allmoney += ret.jiangjin[i].money
            }
            if (ret.jiangjin[i].type === 3) {
              jiangjinmoney.type3 = parseFloat(ret.jiangjin[i].money).toFixed(2);
              allmoney += ret.jiangjin[i].money
            }
          }
          this.jiangjinmoney = jiangjinmoney;
          this.totaljiangjinmoney = parseFloat((Number(jiangjinmoney.type1) + Number(jiangjinmoney.type2) + Number(jiangjinmoney.type3))).toFixed(2)
          // 福利计算
          let fulimoney = {
            type1: 0,
            type2: 0,
            type3: 0
          }
          for (let i = 0; i < ret.fuli.length; i++) {
            if (ret.fuli[i].type === 1) {
              fulimoney.type1 = parseFloat(ret.fuli[i].money).toFixed(2);
              allmoney += ret.fuli[i].money
            }
            if (ret.fuli[i].type === 2) {
              fulimoney.type2 = parseFloat(ret.fuli[i].money).toFixed(2);
              allmoney += ret.fuli[i].money
            }
            if (ret.fuli[i].type === 3) {
              fulimoney.type3 = parseFloat(ret.fuli[i].money).toFixed(2);
              allmoney += ret.fuli[i].money
            }
          }
          this.fulimoney = fulimoney;
          this.totalful = parseFloat((Number(fulimoney.type1) + Number(fulimoney.type2) + Number(fulimoney.type3))).toFixed(2)
          // 工资扣除
          let kouchumoney = {
            type1: 0,
            type2: 0,
            type3: 0
          }
          for (let i = 0; i < ret.kouchu.length; i++) {
            if (ret.kouchu[i].type === 1) {
              kouchumoney.type1 = parseFloat(ret.kouchu[i].money).toFixed(2);
              allmoney -= ret.kouchu[i].money
            }
            if (ret.kouchu[i].type === 2) {
              kouchumoney.type2 = parseFloat(ret.kouchu[i].money).toFixed(2);
              allmoney -= ret.kouchu[i].money
            }
            if (ret.kouchu[i].type === 3) {
              kouchumoney.type3 = parseFloat(ret.kouchu[i].money).toFixed(2);
              allmoney -= ret.kouchu[i].money
            }
          }
          this.kouchumoney = kouchumoney;
          this.totalkouchumoney = parseFloat((Number(kouchumoney.type1) + Number(kouchumoney.type2) + Number(kouchumoney.type3))).toFixed(2)
          this.allmoney = parseFloat(allmoney).toFixed(2);
        } else {
          let allmoney = 0;
          let salemoney = {
            type1: 0,
            type2: 0,
            type3: 0,
            type4: 0
          }
          this.salemoney = parseFloat(salemoney).toFixed(2);
          // 基本工资计算
          let basemoney = {
            type1: 0,
            type2: 0
          }
          this.basemoney = parseFloat(basemoney).toFixed(2);
          // 指标工资计算
          let zhibiaomoney = {
            type1: 0,
            type2: 0,
            type3: 0,
            type4: 0,
            type5: 0,
            type6: 0
          }
          this.zhibiaomoney = parseFloat(zhibiaomoney).toFixed(2);
          // 奖金计算
          let jiangjinmoney = {
            type1: 0,
            type2: 0,
            type3: 0
          }
          this.jiangjinmoney = parseFloat(jiangjinmoney).toFixed(2);
          // 福利计算
          let fulimoney = {
            type1: 0,
            type2: 0,
            type3: 0
          }
          this.fulimoney = parseFloat(fulimoney).toFixed(2);
          // 工资扣除
          let kouchumoney = {
            type1: 0,
            type2: 0,
            type3: 0
          }
          this.kouchumoney = parseFloat(kouchumoney).toFixed(2);
          this.allmoney = parseFloat(allmoney).toFixed(2);
        }
      }
    },
    bindDateChange (e) {
      console.log(e.mp.detail.value)
      this.choosevalue = e.mp.detail.value
      this.year = this.choosevalue.split('-')[0]
      this.month = parseInt(this.choosevalue.split('-')[1])
      this.getinfo()
    },
    // 点击打开查看提成工资信息
    async openMoneyinfoSale (category, type, name) {
      this.saleList = []
      let timeStart = this.year + '-' + this.month + '-1';
      let startTimejs = moment(timeStart, 'YYYY-MM-DD').unix();
      let timeEnd = ''
      if (this.month === 12) {
        timeEnd = this.year + '-' + Number(this.month) + '-31';
      } else {
        timeEnd = this.year + '-' + Number(this.month + 1) + '-1';
      }
      let endEimejs = moment(timeEnd, 'YYYY-MM-DD').unix();
      let ret = await api.getusermoneysaleinfo({ user_id: this.userId, start_time_js: startTimejs, end_time_js: endEimejs, category: category, type: type, name: name })
      console.log(ret)
      this.salaPopName = name
      if (ret.code === '100') {
        this.isPop = true
        this.salarypop = true
        ret.data.forEach(item => {
          item.paytime = moment.unix(item.paytime).format('YYYY-MM-DD hh:mm');
          item.ordertime = moment.unix(item.ordertime).format('YYYY-MM-DD hh:mm');
        });
        this.saleList = ret.data;
      } else {
        Toast(ret.msg)
      }
    },
    // 点击打开查看基本工资信息系统录入
    async openMoneyinfoBase (category, type, name) {
      this.saleList = []
      let timeStart = this.year + '-' + this.month + '-1';
      let startTimejs = moment(timeStart, 'YYYY-MM-DD').unix();
      // let timeEnd = this.year + '-' + Number(this.month + 1) + '-1';
      let timeEnd = ''
      if (this.month === 12) {
        timeEnd = this.year + '-' + Number(this.month) + '-31';
      } else {
        timeEnd = this.year + '-' + Number(this.month + 1) + '-1';
      }
      let endEimejs = moment(timeEnd, 'YYYY-MM-DD').unix();
      let ret = await api.getusermoneysaleinfo({ user_id: this.userId, start_time_js: startTimejs, end_time_js: endEimejs, category: category, type: type, name: name })
      console.log(ret)
      this.salaPopName = name
      if (ret.code === '100') {
        this.isPop = true
        this.salarysystem_pop = true
        console.log(111111111)
        // ret.data.forEach(item => {
        //   item.paytime = moment.unix(item.paytime).format('YYYY-MM-DD hh:mm');
        //   item.ordertime = moment.unix(item.ordertime).format('YYYY-MM-DD hh:mm');
        // });
        this.saleList = ret.data;
      } else {
        Toast(ret.msg)
      }
    },
    closepop () {
      this.isPop = false
      this.salarypop = false
      this.salarysystem_pop = false
    }
  },
  created () {
    // 调用应用实例的方法获取全局数据
    // this.getUserInfo()
  }
}
</script>

<style scoped>
.container {
  padding-top: 49rpx;
  background: rgba(153, 153, 153, 0.1);
}
.noscroll {
  height: 100%;
  overflow: hidden;
}
.panel {
  width: 688rpx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 3px 10px rgba(255, 68, 68, 0.1);
  opacity: 1;
  border-radius: 24rpx;
  margin: 0 auto;
  padding: 28rpx 49rpx;
  padding-bottom: 0;
  margin-bottom: 49rpx;
}
.panel .header {
  font-size: 32rpx;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  margin-bottom: 40rpx;
}
.panel .header .shu {
  display: inline-block;
  width: 4rpx;
  height: 20rpx;
  background: rgba(255, 68, 68, 1);
  border-radius: 2rpx;
  margin-right: 12rpx;
}
.panel_ul {
  width: 100%;
}
.panel_ul li {
  font-size: 28rpx;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 78rpx;
  border-bottom: 2rpx solid rgba(153, 153, 153, 0.2);
}
.panel_ul li:last-child {
  border: none;
}
.grey_arrow {
  display: inline-block;
  width: 12rpx;
  height: 28rpx;
  background: url(http://mytimg.178mr.com/grey_arrow.png) no-repeat;
  background-size: 100%;
  position: relative;
  top: 6rpx;
  margin-left: 30rpx;
}
.panel_ul li.total {
  line-height: 100rpx;
  text-align: center;
  font-size: 32rpx;
  font-weight: 600;
  color: rgba(102, 102, 102, 1);
}
.choose {
  width: 252rpx;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  color: #fff;
  font-size: 28rpx;
  border-radius: 40rpx;
  background: RGBA(255, 68, 68, 1)
    url('http://mytimg.178mr.com/bottom_arrow.png') no-repeat;
  margin: 30rpx auto;
  margin-top: 0;
  background-position: 200rpx 24rpx;
  background-size: 30rpx;
}
small {
  display: inline-block;
  font-size: 24rpx;
}
.salary_pop {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 624rpx;
  height: 862rpx;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0rpx 8rpx 24rpx rgba(255, 68, 68, 0.2);
  border-radius: 24rpx;
  z-index: 2;
}
.salary_pop .title {
  width: 100%;
  font-size: 36rpx;
  font-weight: 400;
  color: rgba(255, 68, 68, 1);
  text-align: center;
  height: 78rpx;
  line-height: 78rpx;
  border-bottom: 2rpx solid RGBA(0, 0, 0, 0.1);
}
.pop_ul {
  width: 100%;
  padding-left: 32rpx;
}
.pop_ul li {
  border-bottom: 2rpx solid RGBA(0, 0, 0, 0.1);
  padding-bottom: 16rpx;
  position: relative;
}
.pop_ul li.nomsg {
  border-bottom: none;
}
.pop_ul li .pop_pic {
  width: 88rpx;
  height: 88rpx;
  background: rgba(153, 153, 153, 1);
  border-radius: 50%;
  margin-right: 20rpx;
}
.pop_ul li .pop_pic img {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
}
.pop_ul li .pop_name {
  font-size: 32rpx;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  margin-top: 16rpx;
}
.pop_ul li .times {
  font-size: 24rpx;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  margin-top: 16rpx;
}
.pop_ul li .money {
  position: absolute;
  top: 16rpx;
  right: 32rpx;
  width: 112rpx;
  height: 48rpx;
  text-align: center;
  line-height: 48rpx;
  background: RGBA(255, 68, 68, 1);
  color: #fff;
  font-size: 24rpx;
  border-radius: 24rpx;
}
</style>
